<template>
    <div>
        <h3>我是一个子组件</h3>
         <hr/>
         <div>子组件显示父组件的username数据：{{username}}</div>
         <br>
         <button @click="setusername">修改一下姓名</button>
    </div>
   
</template>
<script>
    export default {
        //接收组件传入的属性数据
        //props:数组 对象
        // 数组 简写 一般只会在自己定义给自己当前页面使用
        // 对象：一般封装好一个公用组件 给所有的人来用 对象可以限制 传入的数据类型
        // props:['username']
        props:{
            username:{
                //类型 首字母大写
                type:String,
                //默认值 直接给值 回调函数
                default:'暂无'
            }
        },
        methods: {
            setusername(){
                //子向父传值 自定义事件 $emit(事件名称 数值)
                this.$emit('onSetname',Date.now() + ' ')
            }
        },
    }
</script>

<style lang="scss" scoped>
    h3 {
        color: red;
    }
</style>